<template>
  <view class="login_container">
        <view>
          <view class="iconfont icon-keaide "></view>
          <view class="iconfont icon-keaide zwq "></view>
          <view class="wyf">宝贝还没登录哦</view>
        </view>
        <uni-forms ref="loginFormRef" :model="formData" :rules="rules">
          <uni-forms-item label="手机号" required name="phone">
            <uni-easyinput v-model="formData.phone" placeholder="请输入手机号" type="text" trim="all" :clearable="false"></uni-easyinput>
          </uni-forms-item>
          <uni-forms-item label="密码" required name="password">
            <uni-easyinput v-model="formData.password" placeholder="请输入密码" :clearable="false" :passwordIcon="false" type="password" trim="all"></uni-easyinput>
          </uni-forms-item>
        </uni-forms>
        <button size="default" class="btn" @click="getEquipment">登录</button>
        <view class="text">登录享受更多权益</view>
  </view>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name:"login-phone",
  data() {
    return {
      formData: { phone: '', password: '' },
      rules: {
        // 对name字段进行必填验证
        phone: {
          rules: [
            {
              required: true,
              errorMessage: '手机号不能为空'
            },
            {
              maxLength: 11,
              errorMessage: '手机号长度在最大 {maxLength} 个字符'
            },
            {
              validateFunction: function(rule, value, data, callback) {
                let phoneReg = /^1[3-9]\d{9}$/
                if (phoneReg.test(value)) {
                  return true
                }
                callback('手机号不合法')
                console.log(value)
              }
            }
          ]
        },
        password: {
          rules: [
            {
              required: true,
              errorMessage: '密码不能为空'
            }
          ]
        }
      }
    }
  },
  onReady() {
    // 需要在onReady中设置规则
    this.$refs.loginFormRef.setRules(this.rules)
  },
  methods: {
    ...mapMutations('login', ['updateUserInfo', 'updateToken','updateCookie']),
    // ...mapMutations(['login/updateUserInfo']),
    async getEquipment() {
      // const res = uni.getSystemInfoSync()
      const res = await uni.getSystemInfo().platform
      // console.log(res)
      // if (res === 'android') {
      this.submit()
      // } else {
      //   this.getUserProfile()
      // }
    },
    // async getUserProfile() {
    //   const res = await uni.getUserProfile({ desc: '获取用户信息' })
    //   if (res.length === 1) {
    //     return uni.$showMsg('用户取消了授权')
    //   }
    //   if (res[1].errMsg === 'getUserProfile:ok') {
    // this.userInfo = res[1].userInfo
    // console.log(this.userInfo)
    //     this.updateUserInfo(res[1].userInfo)
    //     // console.log(res[1])
    //     this.getToken(res[1])
    //   }
    // },
    // async getToken(info) {
    //   const [err, res] = await uni.login().catch(err => err)
    //   // console.log(res)

    //   if (err || res.errMsg !== 'login:ok') return uni.$showMsg('登录失败')
    //   /*console.log(res.code)*/
    //   const loginQuery = {
    //     encryptedData: info.encryptedData,
    //     rawData: info.rawData,
    //     iv: info.iv,
    //     signature: info.signature,
    //     code: res.code
    //   }
    //   const token = await uni.$http.post('login', loginQuery).catch(err => {
    //     console.log(err)
    //   })
    //   // console.log(token)

    //   if (token.errMsg === 'request:ok') {
    //     // 这里因为不是企业级微信小程序的appid所以无法发送请求成功拿到对应的token,
    //     // 为了继续学习所以选择写死
    //     this.updateToken('Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjIzLCJpYXQiOjE1NjQ3MzAwNzksImV4cCI6MTAwMTU2NDczMDA3OH0.YPt-XeLnjV-_1ITaXGY2FhxmCe4NvXuRnRB8OMCfnPo')
    //   }
    // },
    submit() {
      this.$refs.loginFormRef
        .validate()
        .then(async valid => {
          // console.log(valid)
          ;(this.formData.phone = valid.phone), (this.formData.password = valid.password)
          const { data: res } = await uni.$http.get('login/cellphone', this.formData)
          // console.log(res)
          if (res.code === 200) {
            this.updateToken(res.token)
            const {data:wyf} = await uni.$http.get('user/detail',{uid:res.profile.userId})
            wyf.profile.level=wyf.level
            // console.log(wyf.profile);
            this.updateUserInfo(wyf.profile)
            this.updateCookie(res.cookie)
            return uni.$showMsg('登录成功')
          } else if (res.code === 502) {
            return uni.$showMsg('密码错误')
          } else if (res.code === 400) {
            return uni.$showMsg('手机号不存在')
          } else {
            return uni.$showMsg('登录失败,请重新登录')
          }
        })
        .catch(err => err)
    }
  }
}
</script>

<style lang="scss" scoped>
.login_container {
  margin-top: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 800rpx
  // background-image: url('http://test.imgurl.org/imgs/2022/08/22/caa7add1c3f31811.jpg');
  // background-repeat: no-repeat;
  // background-size: 100%;
}
.btn {
  width: 90%;
  border-radius: 20rpx;
  background-color: #fb6485;
  margin: 60rpx 0;
  color: aliceblue;
}
.text {
  color: #ffffff;
  font-size: 46rpx;
  font-family: '楷体';
  font-weight: 700;
}
.iconfont {
  width: 100rpx;
  height: 100rpx;
  font-size: 60rpx;
  transform: translate(350rpx, 114rpx);
}
.zwq{
  transform: translate(-35rpx, 15rpx) !important;
}
.wyf {
  font-size: 46rpx;
  font-family: '楷体';
  font-weight: 700;
  color: white;
  white-space: nowrap;
  transform: translate(31rpx, -69rpx);
}
</style>
